<template>
  <ul class="select">
    <li
      v-for="item in selectValue"
      :key="item.id"
      @click="to(item)"
    >
      <p>{{ item.p }}</p>
      <h4>{{ item.h4 }}</h4>
    </li>
  </ul>
</template>

<script>
import {getCookie} from '@/tool/ToolCookie'
export default {
  name: "BarSelect",
  data() {
    return {
      selectValue: [
        { id: 1, p: "", h4: "主页", path: "/main" },
        { id: 2, p: "", h4: "上传", path: "/main/upload" },
        { id: 3, p: "", h4: "搜索", path: "/main/find" },
        { id: 4, p: "", h4: "好友", path: "/main/friend/attention" },
        { id: 5, p: "", h4: "我的", path: "/main/myNode/lately" },
        // { id: 6, p: "", h4: "消息", path: "/main/chat" },
        // { id: 7, p: "", h4: "设置", path: "/main/set" }
      ],
    };
  },
  methods:{
    to(item){
      this.$router.push({
        path:item.path,
        query:{id:getCookie("userId")}
      })
    }
  }
};
</script>

<style scoped>
.select {
  width: 100%;
  height: 50%;
  list-style: none;
}

.select li {
  width: 100%;
  height: 15%;
  border-radius: 30px;
  margin: 2% auto;
  line-height: 75px;
  cursor: pointer;
  transition: all 0.2s;
}

.select li:hover {
  background-color: #6556bf;
}

.select p {
  font-family: "icomoon";
  display: inline-block;
  font-size: xx-large;
  color: #39383e;
  margin-left: 10%;
}

.select h4 {
  color: #2b2f3b;
  display: inline-block;
  font-size: xx-large;
  margin-left: 5%;
}

/*为主页选项卡添加选中效果*/
.selecting h4,
.selecting p {
  color: #bfd5e3;
}
</style>